<template>
	<view class="page-check-card">
		<view v-if="errMsg" class="err-img">
			{{errMsg}}
		</view>
		<view class="course-info" v-if="!errMsg">
			<view class="course-info-item">
				<text class="item-title">课程名字：</text>
				<text>{{courseName}}</text>
			</view>
			
			<view class="course-info-item">
				<text class="item-title">课时：</text>
				<text>{{lessonName}}</text>
			</view>
			
			<view class="course-info-item">
				<text class="item-title">上课时间：</text>
				<text>{{classTime}}</text>
			</view>
		</view>
		<view v-if="!errMsg" :class="['check-btn', isValid ? '': 'is-invalid']" @tap="onTap">
			确认已到场
		</view>
	</view>
</template>

<script>
	import * as courseApi from '@/api/course.js'
	export default {
		components: {
			
		},
		data() {
			return {
				orderId: 0,
				token: null,
				errMsg: '',
				courseInfo: null,
				isValid: true
			};
		},
		computed: {
			classTime() {
				const latest_lesson = this.courseInfo?.latest_lesson
				return latest_lesson?.class_date + ' ' + latest_lesson?.class_time
			},
			
			courseName() {
				return this.courseInfo?.course_name
			},
			
			lessonName() {
				return this.courseInfo?.latest_lesson?.name
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.token = options.token
			this.getCardInfo(options.orderId, options.token)
		},
		
		methods: {
			getCardInfo(orderId, token) {
				courseApi.checkCourse({orderId, token}).then(res => {
					console.log(res)
					this.courseInfo = res.data
				}).catch(err => {
					console.log(err)
					this.errMsg = err.errMsg
				})
			},
			
			onTap() {
				const orderId = this.orderId
				const token = this.token
				
				courseApi.clockIn({orderId, token}).then(res => {
					console.log(res)
					if(res.data.isCreated) {
						this.errMsg = '签到成功'
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page-check-card{
	padding: 60rpx 100rpx;
	.course-info{
		.course-info-item{
			font-size: 16px;
			line-height: 2;
			.item-title{
				font-weight: 600;
			}
		}
	}
	
	.check-btn {
		width: 100%;
		height: 86rpx;
		margin-top: 70rpx;
		background: linear-gradient(0deg, #3250FA, #826EF0);
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		border-radius: 80rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
		
		&.is-invalid{
			background: #2C405A;
		}
	}
}
</style>
